<template>
  <div class="search-page">
    <NavBar />
    <div class="main">
      <el-card class="search-card" shadow="hover">
        <div class="wrapper">
          <div class="search-header">
            <h2 class="search-title">
              "<span class="highlight-text">{{ searchText }}</span>"
              <span class="result-count">搜索结果 {{ totalResults }}</span>
            </h2>
          </div>

          <el-row :gutter="30">
            <!-- 侧边栏 -->
            <el-col :span="4">
              <div class="sidebar-wrapper">
                <el-menu :default-active="activeIndex" class="category-menu" @select="handleSelect">
                  <el-menu-item index="1" class="menu-item">
                    <i class="fas fa-globe-asia"></i>
                    <span>所有</span>
                    <span class="menu-badge">{{ totalResults }}</span>
                  </el-menu-item>
                  <el-menu-item index="2" class="menu-item">
                    <i class="fas fa-map-pin"></i>
                    <span>目的地</span>
                    <span class="menu-badge">{{ categories[0].items?.length }}</span>
                  </el-menu-item>
                  <el-menu-item index="3" class="menu-item">
                    <i class="fas fa-landmark"></i>
                    <span>景点</span>
                    <span class="menu-badge">{{ categories[1].items?.length }}</span>
                  </el-menu-item>
                  <el-menu-item index="4" class="menu-item">
                    <i class="fas fa-route"></i>
                    <span>攻略</span>
                    <span class="menu-badge">{{ categories[2].items?.length }}</span>
                  </el-menu-item>
                  <el-menu-item index="5" class="menu-item">
                    <i class="fas fa-book-open"></i>
                    <span>游记</span>
                    <span class="menu-badge">{{ categories[3].items?.length }}</span>
                  </el-menu-item>
                </el-menu>
              </div>
            </el-col>

            <!-- 搜索结果网格 -->
            <el-col :span="20">
              <div class="category-section" v-for="(category) in filteredCategories" :key="category.title">
                <div class="category-header">
                  <h3 class="category-title"><i :class="getCategoryIcon(category.title)"></i> {{ category.title }} ({{ category.items?.length }})</h3>
                </div>
                <el-row :gutter="24">
                  <el-col v-for="(item, i) in category.items" :key="i" :xs="24" :sm="12" :md="8" class="card-col">
                    <el-card class="item-card" shadow="hover"  @click="goToDetail(item, category.title)">
                      <div class="card-img-wrapper">
                        <img :src="item.imagePath || item.coverImage" class="card-image" />
                      </div>
                      <div class="card-content">
                        <h4 class="card-title">{{ item.title || item.cityName || item.spotName }}</h4>
                        <div class="card-info">
                          <p v-if="item.cityName">{{ item.cityName }}</p>
                          <p v-if="item.spotName">{{ item.spotName }}</p>
                          <p v-if="item.description">{{ item.description }}</p>
                        </div>
                        <div v-if="item.score">
                          <el-rate :model-value="item.score" disabled show-score />
                        </div>
                        <div class="stat-item" v-if="item.viewCount">
                          <el-icon><View /></el-icon> {{ item.viewCount }}
                        </div>
                        <div class="stat-item" v-if="item.likeCount">
                          <el-icon><Star /></el-icon> {{ item.likeCount }}
                        </div>
                        <div class="stat-item" v-if="item.commentCount">
                          <el-icon><ChatDotRound /></el-icon> {{ item.commentCount }}
                        </div>
                      </div>
                    </el-card>
                  </el-col>
                </el-row>
              </div>
              <div class="pagination-container">
                <el-pagination
                    background
                    layout="prev, pager, next, jumper"
                    :page-size="pageSize"
                    :total="paginationTotal"
                    :current-page="currentPage"
                    @current-change="handleCurrentChange"
                />
              </div>
            </el-col>
          </el-row>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script setup>
import { ref, computed, onMounted } from 'vue';
import NavBar from '@/components/NavBar.vue';
import { getSearch } from "@/api/home.js";
import { View, Star, ChatDotRound } from '@element-plus/icons-vue';
import { useRouter } from 'vue-router';
import { useRoute } from 'vue-router';

const route = useRoute();
const idFieldMap = {
  '景点': 'spotId',
  '攻略': 'guideId',
  '游记': 'travelogueId',
  '目的地': 'id'
};
const router = useRouter();

const keyword = route.query.q;
const goToDetail = (item, category) => {
  let path = '';
  const idField = idFieldMap[category];
  const id = item[idField];

  switch (category) {
    case '目的地':
      // 目的地使用路径参数
      path = `/CityDetail/${id}`;
      router.push({ path });
      break;
    case '景点':
      path = '/spotsIntro';
      break;
    case '攻略':
      path = '/travelGuidePage';
      break;
    case '游记':
      path = '/travelBlogPage';
      break;
  }

  // 除了目的地之外用 query 方式跳转
  if (category !== '目的地') {
    router.push({ path, query: { id } });
  }
};

const activeIndex = ref('1'); // 当前选中的导航项
const searchText = ref(route.query.q || ''); // 搜索输入内容
const currentPage = ref(1); // 当前页码
const pageSize = ref(9); // 每页显示的数量
const filterValue = ref('recommended'); // 默认排序方式

const categories = ref([
  { title: '目的地', items: [] },
  { title: '景点', items: [] },
  { title: '攻略', items: [] },
  { title: '游记', items: [] }
]);

onMounted(() => {
  go();
});

const go = () => {
  getSearch(searchText.value).then((res) => {
    categories.value[0].items = res.data.cities;
    categories.value[1].items = res.data.spots;
    categories.value[2].items = res.data.guides;
    categories.value[3].items = res.data.travelogues;
  });
};

// 过滤显示的类别
const filteredCategories = computed(() => {
  if (activeIndex.value === '1') {
    return categories.value; // 所有类别
  } else {
    return categories.value.filter(category => category.title === getCategoryName(activeIndex.value));
  }
});

const getCategoryName = (index) => {
  switch (index) {
    case '2': return '目的地';
    case '3': return '景点';
    case '4': return '攻略';
    case '5': return '游记';
    default: return '';
  }
};

const getCategoryIcon = (category) => {
  switch(category) {
    case '目的地': return 'fas fa-map-marker-alt';
    case '景点': return 'fas fa-landmark';
    case '攻略': return 'fas fa-route';
    case '游记': return 'fas fa-book-open';
    default: return 'fas fa-globe-asia';
  }
};

// 处理菜单项选择
const handleSelect = (key) => {
  activeIndex.value = key;
  currentPage.value = 1; // 切换菜单时重置页码
};

const handleCurrentChange = (val) => {
  currentPage.value = val;
};

// 计算搜索结果总数
const totalResults = computed(() => {
  return categories.value.reduce((total, category) => total + category.items.length, 0);
});
</script>



<style scoped>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');

/* 全局变量定义 */
:root {
  --primary: #ff6b6b;
  --primary-light: #ffb8b8;
  --secondary: #1e88e5;
  --accent: #ffd166;
  --dark: #2d3436;
  --gray: #636e72;
  --light-gray: #f8f9fa;
  --white: #ffffff;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  --gradient: linear-gradient(120deg, #ff6b6b 0%, #ff9e80 100%);
}

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Noto Sans SC', sans-serif;
  background: #0e9aa7;
}

.search-page {
  min-height: 100vh;
  background: linear-gradient(to bottom, #f8f9fa 0%, #e9ecef 100%);
}

.main {
  padding: 30px;
  display: flex;
  justify-content: center;
}

/* 搜索卡片 */
.search-card {
  width: 90vw;
  max-width: 1400px;
  border-radius: 16px;
  transition: all 0.3s ease;
  margin-bottom: 40px;
  border: none;
  overflow: hidden;
}
.stat-item {
  display: flex;
  align-items: center;
  gap: 4px;
}
.search-card:hover {
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
  transform: translateY(-5px);
}

.wrapper {
  padding: 15px;
}

/* 搜索标题 */
.search-header {
  margin-bottom: 25px;
  position: relative;
}

.search-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--dark);
  display: flex;
  align-items: center;
  gap: 15px;
}

.highlight-text {
  color: var(--primary);
  position: relative;
  z-index: 1;
}

.highlight-text::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 8px;
  background-color: rgba(255, 107, 107, 0.2);
  z-index: -1;
}

.result-count {
  font-size: 16px;
  color: var(--gray);
  font-weight: 400;
}

/* 侧边栏 */
.sidebar-wrapper {
  margin-right: 20px;
  position: sticky;
  top: 20px;
  align-self: flex-start;
  z-index: 10;
}

.category-menu {
  border-radius: 16px;
  overflow: hidden;
  background-color: #fff;
  box-shadow: var(--shadow);
  border: none;
}

.menu-item {
  margin: 8px;
  height: 50px;
  line-height: 50px;
  border-radius: 12px;
  font-weight: 500;
  color: var(--dark);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  padding-left: 16px;
}

.menu-item i {
  margin-right: 10px;
  font-size: 18px;
  color: var(--gray);
  width: 24px;
  text-align: center;
}

.menu-item:hover {
  background-color: rgba(30, 136, 229, 0.08);
  color: var(--secondary);
  transform: translateX(5px);
}

.menu-item:hover i {
  color: var(--secondary);
}

.el-menu-item.is-active {
  background: #11BCCC;
  color: var(--secondary);
  margin: 8px;
  border-radius: 12px;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  position: relative;
}

.el-menu-item.is-active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 4px;
  background: var(--secondary);
  border-radius: 0 4px 4px 0;
}

.el-menu-item.is-active i {
  color: var(--secondary);
}

.menu-badge {
  margin-left: auto;
  background-color: rgba(30, 136, 229, 0.1);
  color: var(--secondary);
  border-radius: 20px;
  padding: 0 10px;
  font-size: 12px;
  line-height: 20px;
  margin-right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 24px;
}

.el-menu-item.is-active .menu-badge {
  background-color: #2093F7;
  color: white;
  box-shadow: 0 2px 4px rgba(30, 136, 229, 0.3);
}

/* 分类部分 */
.category-section {
  margin-bottom: 40px;
}

.category-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.category-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--dark);
  display: flex;
  align-items: center;
  gap: 10px;
}

.category-title i {
  color: var(--primary);
  font-size: 20px;
}

.category-count {
  font-weight: 400;
  color: var(--gray);
  font-size: 16px;
}

/* 卡片部分 */
.card-col {
  margin-bottom: 25px;
}

.item-card {
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
  height: 100%;
  border: none;
}

.item-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

.card-img-wrapper {
  position: relative;
  overflow: hidden;
}

.card-image {
  width: 100%;
  height: 180px;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.item-card:hover .card-image {
  transform: scale(1.1);
}

.card-overlay {
  position: absolute;
  top: 10px;
  right: 10px;
  transition: all 0.3s ease;
  opacity: 0;
}

.item-card:hover .card-overlay {
  opacity: 1;
}

.favorite-btn {
  background-color: white;
  color: var(--primary);
  border: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.favorite-btn:hover {
  background-color: var(--primary);
  color: white;
}

.card-content {
  padding: 16px;
}

.card-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--dark);
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.location {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--gray);
  font-size: 14px;
}

.location i {
  color: var(--primary);
}

.rating {
  display: flex;
  align-items: center;
}

/* 浏览更多按钮 */
.more-button-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.view-more-btn {
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 25px;
  background: transparent;
  color: var(--primary);
  border: 2px solid var(--primary);
  transition: all 0.3s ease;
}

.view-more-btn:hover {
  background: var(--primary);
  color: white;
  transform: translateX(5px);
}

.view-more-btn i {
  transition: transform 0.3s ease;
}

.view-more-btn:hover i {
  transform: translateX(5px);
}

/* 筛选部分 */
.filter-section {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}

.filter-select {
  width: 150px;
}

/* 分页部分 */
.pagination-container {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .search-card {
    width: 95vw;
  }
}
.sidebar-wrapper {
  margin-right: 20px;
  position: sticky;
  top: 20px;
  align-self: flex-start;
  z-index: 10;
}
@media (max-width: 992px) {
  .sidebar-wrapper {
    margin-right: 0;
    margin-bottom: 20px;
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--white);
    padding: 10px 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    width: 100%;
  }

  .category-menu {
    display: flex;
    overflow-x: auto;
    padding: 10px;
    border-radius: 0;
    box-shadow: none;
  }

  .menu-item {
    flex: 0 0 auto;
    white-space: nowrap;
    margin: 0 5px;
  }

  .el-menu-item.is-active::before {
    display: none;
  }

  .el-menu-item.is-active {
    background-color: var(--secondary);
    color: white;
  }

  .el-menu-item.is-active i {
    color: white;
  }
}

@media (max-width: 768px) {
  .main {
    padding: 15px;
  }

  .search-title {
    font-size: 22px;
  }

  .card-image {
    height: 150px;
  }
}

@media (max-width: 576px) {
  .category-title {
    font-size: 18px;
  }

  .card-title {
    font-size: 16px;
  }
  .icon-view, .icon-like, .icon-comment {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-size: contain;
    background-repeat: no-repeat;
  }

  .icon-view {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23999999'%3E%3Cpath d='M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z'/%3E%3C/svg%3E");
  }

  .icon-like {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23999999'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");
  }

  .icon-comment {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23999999'%3E%3Cpath d='M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z'/%3E%3C/svg%3E");
  }
}

</style>